<template>
  <nav-bar>
    <template v-slot:default>商品详情</template>
  </nav-bar>
  <div class="detailList">
    <h3 class="title">{{ list[flag1].year }}年定期存款</h3>
    <div class="detail">
      <div>
        <h4 class="rate">年利率</h4>
        <h3>{{ list[flag1].rate }}%</h3>
      </div>
      <div>
        <h4 class="year">存期</h4>
        <h3>{{ list[flag1].year }}年</h3>
      </div>
      <div>
        <h4 class="money">定存金额</h4>
        <h3>￥{{ list[flag1].money }}元</h3>
      </div>
    </div>
  </div>
  <div class="addcart" >
    <el-button type="success" @click="sub(id)" v-if="(flag == 0)&&(timeFlagSch)" plain
      >加入预约</el-button
    >
    <el-button type="info" v-on:click="cancel()" v-if="(flag == 1)&&(timeFlagSch)"
      >取消预约</el-button
    >
    <el-button type="success" @click="toBuy(id)" :disabled="disabled" >{{ content }}</el-button>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import NavBar from "../../components/common/navbar/NavBar.vue";
import { allSchedule, addSchedule, deleteSchedule } from "@/api/schedule";
export default {
  components: {
    NavBar,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      flag: 0,
      id: 0,
      list: [],
      list1: [],
      index: 0,
      flag1: 0,
      timeFlagBuy:true,
      timeFlagSch:true,
      disabled: false,
      content: '',
      leftTime: 0,
      chuValue: 0,
    });

    
      //判断按钮显示
      // var now = new Date();
      // var startTime=new Date(state.list[state.flag1].time_from)
      // var endTime=new Date(state.list[state.flag1].time_end)
      // console.log("现在"+now)
      // console.log("开始"+startTime)
      // console.log("结束"+endTime)
      //时间差
      // var leftTime = startTime - now;
    
    
    // timeShow()

    state.list = JSON.parse(localStorage.getItem('availableList'));
    state.chuValue = localStorage.getItem('chuvalue');
    const toBuy = (id) => {
      router.push({ path: "/buy", query: { id } });
    };
    const initSchedule = async () => {
      const res = await allSchedule(localStorage.getItem("userID"));
      for (let item of res.data) {
        state.list1.push(item.product);
      }
      for (var i = 0; i < state.list1.length; i++) {
        if (state.list1[i] == state.id) {
          state.flag = 1;
          state.index = i;
        }
      }
      //显示详细信息
      for(let it = 0; it < state.list.length; it++){
        if(state.list[it].id == state.id){
        state.flag1 = it
      }
      
      // if (now.getTime() < startTime.getTime()){
      //   state.timeFlagSch=true;
      //   state.timeFlagBuy=false;
      // }
      // else if ((startTime.getTime()<now.getTime())&&(now.getTime()<endTime.getTime())){
      //   state.timeFlagSch=false;
      //   // if(state.list[state.flag1].count_sale<state.list[state.flag1].count)
      //     state.timeFlagBuy=true;
      //   // else
      //   //   state.timeFlagBuy=false;
      // }

    }
    };
    initSchedule();

     const timeShow1 = () => {
       
      let date = new Date();
      let now = date.getTime();
      let startTime=new Date(state.list[state.flag1].time_from);
      let start = startTime.getTime();
      state.leftTime = start - now;
    
      if (state.leftTime > 0) {
        var d = Math.floor(state.leftTime / 1000 / 60 / 60 / 24);
        var h = Math.floor(state.leftTime / 1000 / 60 / 60 % 24);
        var m = Math.floor(state.leftTime / 1000 / 60 % 60);
        var s = Math.floor(state.leftTime / 1000 % 60);
        state.content = d + '天' + h + '时' + m + '分' + s + '秒后可以下单'
        state.disabled = true
      }
      else{
        state.disabled = false;
        state.timeFlagSch=false;
        state.content = '下单购买'
      }
      
    }

    const Time = () => {

            setInterval(() => {
                if(state.leftTime>=0){
                  state.leftTime--;

                timeShow1();
                }
                
            }, 1000)

    }

    onMounted(()=>{
      // if(state.chuValue == 0){
      //   state.content = '不符合购买条件';
      //   state.disabled = true;
      // }
      // else
      Time()
    })


    const sub = async (id) => {
      await addSchedule(id);
      location.reload();
    };
    const cancel = async () => {
      await deleteSchedule(state.list[state.flag1].id);
      location.reload();
    };
    state.id = route.query.id;

    return {
      ...toRefs(state),
      toBuy,
      sub,
      cancel,
    };
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: left;
  margin: 10px;
}
.detailList {
  padding: 0 5%;
  width: 90%;
  height: 150px;
  margin: 60px auto;
  border: 1px solid #efefef;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
}
.detail {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}
</style>
